<template>
  <div class="video-panel">
    <div class="video">
      <i @click="$emit('closeVideo')" class="el-icon-error"></i>
      <video
        autoplay
        :src="videoURL"
        controls="controls"
      >your browser does not support the video tag</video>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    videoURL: {
      type: String,
      required: true
    }
  },
  components: {},
  data () {
    return {}
  },
  created () {},
  methods: {}
}
</script>

<style lang="less" scoped>
i {
  font-size: 50px;
  margin: 50px 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
video{
  position: absolute;
  width: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.video-panel {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 3000;
}
</style>
